<template>
  <a-modal
    :visible="visible"
    :body-style="{
      'background-color': '#000',
      border: '0px solid black',
      'box-shadow': '0px 0px 0px 0px',
      'border-radius': '15px',
    }"
    width="70vw"
    :closable="true"
    :destroy-on-close="true"
    :footer="null"
    :mask-style="{
      opacity: '0.5',
      background: '#000',
      animation: 'none',
    }"
    @cancel="handleOK"
  >
    <div class="video-inner-wrap">
      <MyVideoPlayer
        ref="videoPlayer"
        :auto-play="true"
        :source-type="videoSrc"
        :size="0.7"
        :has-control-bar="true"
      ></MyVideoPlayer>
    </div>
  </a-modal>
</template>

<script>
import MyVideoPlayer from './MyVideoPlayer.vue'

export default {
  components: { MyVideoPlayer },
  props: {
    visible: {
      type: Boolean,
      default() {
        return false
      },
    },
    videoSrc: {
      type: String,
      default: '',
    },
  },
  methods: {
    handleOK() {
      this.$emit('handleOK')
    },
  },
}
</script>

<style scoped>
.video-inner-wrap {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}

/deep/ .ant-modal-mask {
  opacity: 0.7 !important;
}

/deep/ .ant-modal-close {
  color: #fff;
}

/deep/ .ant-modal-content {
  border-radius: 15px !important;
}
</style>
